import React, { useEffect, useState } from 'react'
import { Table, Tag, Space, Button, Modal, Switch, Popover} from 'antd';
import axios from 'axios';
import {
  DeleteOutlined,
  EditOutlined,
  ExclamationCircleOutlined
 } from '@ant-design/icons';

const { confirm } = Modal;

export default function Rightlist() {
  const [dataSource, setDataSource] = useState();
  const [isCheck, setIsCheck] = useState(true);
  const showConfirm = (item) => {
    confirm({
      title: '您确定要删除这一权限吗？',
      icon: <ExclamationCircleOutlined />,
  
      onOk() {
        let list = dataSource;
        if(item.grade === 1){
          list = list.filter((data)=> data.id !== item.id)
          setDataSource(list);
          axios({
            url:`/rights/${item.id}`,
            method:'DELETE'
          })
        }
        else{
          list = list.filter(data=> data.id === item.rightId);
          list[0].children = list[0].children.filter(data => data.id !== item.id);
          console.log(dataSource);
          setDataSource([...dataSource]);
          axios({
            url:`/children/${item.id}`,
            method:'DELETE'
          })
        }
      },
  
      onCancel() {
        console.log('Cancel');
      },
    });
  };
  const controlSwitch = (item) => {
    console.log(item)
    item.pagepermisson = item.pagepermisson === 1? 0:1
    setIsCheck(item.pagepermisson);
    setDataSource([...dataSource]);
    if(item.grade === 1){
      axios.patch(`/rights/${item.id}`,{
        pagepermisson:item.pagepermisson
      })
    }
    else{
      axios.patch(`/children/${item.id}`,{
        pagepermisson:item.pagepermisson
      })
    }
  }
  useEffect(()=>{
    axios({
      url:'/rights?_embed=children',
    }).then(res => {
      let list = res.data;
      list.forEach(item =>{
        if(item.children.length === 0){
          item.children = '';
        }
      })
      setDataSource(list);
    })
  },[])
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      render:(id) => (
        <b>{id}</b>
      )
    },
    {
      title: '权限名称',
      dataIndex: 'title',
    },
    {
      title: '权限路径',
      dataIndex: 'key',
      render: (key) => (
        <>
          <Tag color={'blue'}>
            {key}
          </Tag>
        </>
      ),
    },
    {
      title: '操作',
      render: (item) => {
        return (
          <Space size="middle">
          <Button danger shape="circle" icon={<DeleteOutlined />} size='small' onClick={()=>{
            showConfirm(item)
          }}/>
          <Popover content={<Switch 
          onChange={()=>{
            controlSwitch(item);
          }} 
          checkedChildren="开启" 
          checked={item.pagepermisson? isCheck:''} 
          unCheckedChildren="关闭" 
          />} title="是否开启权限" trigger={item.pagepermisson===undefined?"":"click"}>
            <Button type='primary' 
            shape="circle" 
            icon={<EditOutlined />} 
            disabled={item.pagepermisson===undefined?'disabled':''} 
            size='small'/>
          </Popover>
          </Space>
        )
      },
    },
  ];
  return (
    <div>
      <Table dataSource={dataSource} columns={columns} 
             pagination= {{
              pageSize:5
             }}
      />
    </div>
  )
}
